<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<th:block th:fragment="comment">
    <!--需要实现reply函数-->
    <template id="comment-template">
        <div class="comment">
            <a v-if="anchor" class="avatar" :id="c.id">
                <img :src="c.authorAvatar">
            </a>
            <a v-else class="avatar" :href="`#${c.id}`">
                <img :src="c.authorAvatar">
            </a>
            <div class="content">
                <a class="author">
                    {{c.authorName}}
                </a>
                <a class="author" v-if="c.reply !== undefined">
                    对 {{c.reply.authorName}} 说
                </a>
                <div class="metadata">
                    <span class="date">
                        {{c.createTime}}
                    </span>
                </div>
                <div class="text">{{c.content}}</div>
                <div class="actions" onclick="reply(this)" :rid="c.id" :rn="c.authorName"><a class="reply">回复</a></div>
            </div>
            <div class="comments" v-if="c.reply !== undefined">
                <comment-info :c="c.reply" :anchor="false"></comment-info>
            </div>
        </div>
    </template>
</th:block>

<th:block th:fragment="comment-area(id,update)">
    <div class="ui segment">
        <h3 v-if="replayId" class="ui dividing header">回复 {{replayName}}
            <button class="ui button" @click="un_reply()">取消回复</button>
        </h3>
        <h3 v-else class="ui dividing header">评论文章</h3>
        <form id="comment-form" onsubmit="return post_comment()">
            <div class="ui form">
                <textarea name="content"></textarea>
                <input name="postId" type="hidden" th:value="${id}">
                <input name="parentId" type="hidden" :value="replayId">
                <button type="submit" class="ui button"><i class="edit icon"></i>发布</button>
            </div>
        </form>
        <!-- 评论区 -->
        <div class="ui threaded comments">
            <h3 class="ui dividing header">评论</h3>
            <comment-info v-for="comment in comments" :c="comment" :anchor="true"></comment-info>
        </div>
        <script>
            function post_comment() {
                json_api("[[@{|${API_PATH}/comments|}]]", d => {
                    if (d.code == 200) {
                        layer.alert('您的评论已收到!', {
                            icon: 1,
                            title: "成功"
                        });
                        [[${update}]]();
                    } else {
                        layer.alert('评论发布失败', {
                            icon: 5,
                            title: "失败"
                        });
                    }
                }, $('#comment-form').serialize(), true);
                return false;
            }
        </script>
    </div>
</th:block>
</body>
</html>